<template>
  <div class="FirstDayComponent">
    <div class="componetsMintitle">0.实现双向绑定</div>

    <p>{{inputText}}</p>
    <input class="input0" type="text" v-model="inputText">
    <button v-on:click="reverseMessage" style="color: blue;">内容反转</button>

    <div class="componetsMintitle">1.过滤器：把英文的 首字母大写(监听方法一)</div>
    <div>
      <p>{{input1 | capitaize}}</p>
      <input type="text" v-model="input1">
    </div>

    <div class="componetsMintitle">2.计数器(监听方法二)</div>
    <div>
      {{counter}}
      <button @click="counter++" style="font-size:25px;margin-left:20rem;">点我</button>
    </div>

    <div class="componetsMintitle">3.元素自动换行</div>
    <div class="testView">
      <div class="testCell" v-for="index in 20" :key="index">{{index}}小黄鸭</div>
    </div>

    <div class="componetsMintitle">4.VUE生命周期</div>
    <div class="basisView">
      <img src="../../assets/lifecycle.png" alt="VUE生命周期" style="width:500px;height:900px;">
    </div>
  </div>
</template>

<script>
export default {
  name: "FirstDayComponent",
  props: {
    item: {
      title: String,
      closed: Boolean
    }
  },
  data() {
    return {
      inputText: "你可以尝试改变输入框里面的值",
      input1: "welcome",
      counter: 1
    };
  },
  created() {
    this.$watch("counter", function(nval, oval) {
      alert("计数器值的变化 :" + oval + " 变为 " + nval + "!");
    });
  },
  methods: {
    // 字符串翻转
    reverseMessage: function() {
      this.inputText = this.inputText
        .split("")
        .reverse()
        .join("");
    }
  },

  filters: {
    capitaize: function(params) {
      if (!params) return "";
      params = params.toString();
      return params.charAt(0).toUpperCase() + params.slice(1);
    }
  },
  // 输入框的  监听方法
  watch: {
    input1: function(params) {
      console.log("进来了    " + params);
      this.input1 = params;
    }
  }
};
</script>

<style scoped>
/* 内容部分 */
input {
  border: solid 1px red;
  text-align: center;
}
.input0 {
  width: 30vw;
  margin-right: 2rem;
}

.testView {
  overflow: hidden;
  word-wrap: break-word;
  width: 100%;
}
.testCell {
  width: auto;
  height: auto;
  display: inline-block;
  margin-left: 10px;
}
</style>

